<template>
    <div class="tab-bar-item" @click="itemClick">
        <div v-if="!isActive"> <slot  name="item-icon"></slot></div>
        <div v-else><slot  name="item-icon-active"></slot></div>
         
        <div :style="textColor"><slot name="item-text"></slot></div>  
    </div>
    
    <!-- <div class="tab-bar-item">
            <i class="iconfont icon-shouye"></i>
            首页
        </div>
       <div class="tab-bar-item">
            <i class="iconfont icon-fenlei"></i>
            分类
        </div>
         <div class="tab-bar-item">
            <i class="iconfont icon-gouwuche"></i>
            购物车
        </div>
         <div class="tab-bar-item">
            <i class="iconfont icon-wode"></i>
            我的
        </div> -->
   
</template>


<script>
export default {
    props: {
        path: String,
        activeColor: {
            type: String,
            default: 'red'
        }
    },
    data(){
        return{
            // isActive: true,
        }
    },
    computed: {
        isActive() {
            return this.$route.path === this.path
        },
        textColor() {
            return this.isActive ? {color: this.activeColor} : '{}'
        }
    },
    methods: {
        itemClick() {
            // console.log(this.$route)
            if (this.$route.path === this.path) return
            this.$router.replace(this.path)

        }
    }
}
</script>


<style scoped>
@import "http://at.alicdn.com/t/c/font_4294426_gvzealrag0j.css";

.tab-bar-item{
  flex: 1;
  text-align: center;
  height: 49px;
  /* margin-top: 3px; */
  padding-top: 3px;
 }

 .tab-bar-item i{
    /* display: block; */
    font-size: 20px;
 }

 .tab-bar-item .active{
    color: red;
 }

 .selected{
    color: red;
 }

 
</style>